<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tree-table</title>
        <link rel="stylesheet" href="/components/treetable-lay/assets/layui/css/layui.css">
        <link rel="stylesheet" href="/components/treetable-lay/assets/common.css"/>
        <script src='/components/treetable-lay/assets/layui/layui.js'></script>

        <script src="/manage/js/app.js"></script>
        <style>
            input {
                height: 33px;
                width: 150px;
                line-height: 33px;
                padding: 0 7px;
                border: 1px solid #ccc;
                border-radius: 2px;
                margin-bottom: -2px;
                outline: none;
            }

            input:focus {
                border-color: #009E94;
            }
        </style>
    </head>

    <body>
        <!-- 设置数据表格宽 -->
        <div class="layui-container layui-form" style="width: 96%;margin-left: 40px">
            <br>
            <br>
            终端：
            <div class="layui-input-inline">
                <select id="terminal" lay-filter="terminal">
                    <!--  <option value='" + dices[index].code + "' pid='" + dices[index].pid + "'>" + dices[index].name + "</option>-->
                </select>
            </div>
            <div class="layui-input-inline">
                <select id="fatherMeuns" lay-filter="refreshTableMeuns">
                    <!--  <option value='" + dices[index].code + "' pid='" + dices[index].pid + "'>" + dices[index].name + "</option>-->
                </select>
            </div>
            <!-- 展开/折叠 -->
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-primary" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-primary" id="btn-fold">全部折叠</button>
            </div>

            <!-- 搜索按钮 -->
            <input id="edt-search" type="text" placeholder="输入关键字"/>&nbsp;&nbsp;
            <button class="layui-btn  layui-btn-normal layui-btn-sm" id="btn-search">&nbsp;搜索&nbsp;&nbsp;</button>

            <!-- 表格头按钮 -->
            <button class="layui-btn  layui-btn-sm" data-type="add">+ 系统</button>

            <!-- 数据表格 -->
            <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
        </div>

        <script>
            // 接口
            var menuUrl = path + "/admin/menu";
            var menuListUrl = path + "/admin/menu/list";
            // 修改父级查询
            var menuMenuListUrl = path + "/admin/menu/list?isBottomLayer=false";

            // 路由
            let page_add = "/page/manage_admin_menu_menuAdd";        // 添加菜单/页面弹层
            let page_upd = "/page/manage_admin_menu_menuUpd";        // 菜单编辑弹层
            let page_updPid = "/page/manage_admin_menu_menuUpdPid";  // 变更父级

            // 当前行数据
            var data = null;
            var menus;                  // 所有菜单数据
            var tableMenus;             // 表格加载的菜单数据
            var terminalKey = "1";      // 终端（默认平台）
            var pidKey = "";            // 父id

            layui.config({
                base: '../components/treetable-lay/module/' //静态资源所在路径
            }).extend({
                treetable: 'treetable-lay/treetable'
            }).use(['table', 'treetable'], function () {
                xijiaInit();
                xijiaRenderTable();       // 数据表格 - 获取表格
                xijiaEventToolbar();      // 工具栏事件（多删除/添加）
                xijiaEventTool();         // 监听数据表格内按钮操作（编辑,删除等）
                xijiaEventSearch();       // 监听条件搜索
                xijiaEventSwitch();       // 监听Switch开关

            });

            function xijiaInit() {
                $("#terminal").html(Dict.getDictSelect(Enums.Admin.Terminal, "", "所有", terminalKey));     // 终端
                // 刷新,否则select可能不生效
                layui.form.render();

                // 监听终端选择(重新在服务端获取数据)
                layui.form.on('select(terminal)', function (data) {
                    pidKey = "";
                    xijiaRenderTable(data.value);
                });
                // 监听父级选择(直接刷新页面数据)
                layui.form.on('select(refreshTableMeuns)', function (data) {
                    refreshTable(data.value)
                });
            }


            /**
             * 处理 table 数据
             */
            function xijiaRenderTable(terminal) {
                terminalKey = (terminal !== null && terminal !== undefined) ? terminal : terminalKey;
                // 获取菜单数据
                menus = Ajax.get(menuListUrl + "?terminal=" + terminalKey ).data;
                // 默认加载所有
                refreshTable(pidKey);
                // 加载父级搜索值：拼接搜索值
                let html = "<option value='' selected>所有</option>";
                $.each(menus, function (index, item) {
                    if (menus[index].pid === "0") {
                        html += "<option value='" + menus[index].id + "'>" + menus[index].name + "</option>"
                    }
                });
                $("#fatherMeuns").html(html);
                // 刷新,否则select可能不生效
                layui.form.render();
            }


            /**
             * 切换table中的数据 和默认table 数据处理
             * pid : 父id
             */
            function refreshTable(pid) {
                pidKey = (pid !== null && pid !== undefined) ? pid : pidKey;
                // 空展示所有
                if (pidKey === "") {
                    tableMenus = menus;
                    xijiaRenderTableTwo();
                } else {
                    // 干掉当前未选中的 pid,去掉了指定父级pid的数据,该类目下的所有时间将隐藏
                    // 获取当前选中的pid下的所有菜单(排除为父级并且不等于pid的数据)
                    tableMenus = menus.filter(item => ((item.pid === "0" && item.id === pid) || item.pid !== "0"));
                    xijiaRenderTableTwo();
                }
            }


            /**
             *   数据表格
             * @author ws
             * @mail  1720696548@qq.com
             * @date  2020/4/19 0019 21:43
             * @return
             */
            function xijiaRenderTableTwo() {
                //菜单数据
                // let menus = Ajax.get(find_list);
                // 渲染表格
                layer.load(2);
                //加载数据
                layui.treetable.render({
                    treeColIndex: 0,            //菜单列索引 ,加载展开图标
                    treeSpid: 0,                //顶级父id
                    treeIdName: 'id',           //id 名称
                    treePidName: 'pid',         //fid 名称
                    treeDefaultClose: false,     // 是否默认折叠
                    treeLinkage: true,          // 父级展开时是否自动展开所有子级
                    elem: '#auth-table',        //table 的 div
                    //url:'/menu/findAll',                         //后台接口获取数据
                    //url: '../treetable-lay/json/menus.json',     //json文件获取数据
                    data: tableMenus,                             //直接加载数据
                    page: false,
                    done: function () {
                        //  $("table").css("width", "96%");
                        layer.closeAll('loading');
                    },
                    cols: [
                        [
                            //{field: 'id', width: 100, type: 'id', title: 'id'},
                            {field: 'name', width: 250, title: '菜单名称'},//edit: 'text',
                            {
                                field: 'icon', width: 80, title: '图标', templet: function (res) {
                                    return "<i class='layui-icon " + res.icon + "'></i>";
                                }
                            },
                            {field: 'url', width: 397, edit: 'text', title: '路由'},
                            {field: 'sort', width: 160, edit: 'text', title: '排序'},
                            {
                                field: 'disable', width: 160, title: '禁用/启用', templet: function (res) {
                                    let menuId = res.id;
                                    if (res.disable == 0) {
                                        return "   <input type='checkbox'  menuId = '" + menuId + "' lay-filter='disable' lay-skin='switch' lay-text='启用|禁用' checked>"
                                    } else if (res.disable == 1) {
                                        return "   <input type='checkbox'  menuId = '" + menuId + "'  lay-filter='disable' lay-skin='switch' lay-text='启用|禁用'>"
                                    }
                                }
                            },
                            {
                                field: 'root', width: 200, title: '添加菜单/页面', templet: function (res) {
                                    if (res.root === 1) {
                                        // 系统
                                        return " <a class=\"layui-btn  layui-btn-xs\" lay-event=\"add\"> + 菜单</a>\n";
                                    } else if (res.root === 2) {
                                        // 菜单
                                        return " <a class=\"layui-btn  layui-btn-xs\" lay-event=\"add\"> + 菜单</a>\n"
                                            + " <a class=\"layui-btn layui-btn-xs\" lay-event=\"addPage\"> + 页面</a>\n";
                                    } else if (res.root === 3) {
                                        //页面  class="layui-badge layui-bg-gray
                                        return '<span class="layui-badge layui-bg-gray">页面</span>';
                                    }
                                }
                            },
                            {
                                field: '', width: 260, title: '操作', templet: function (res) {
                                    let html = "";
                                    html += "<a class=\"layui-btn layui-btn-warm layui-btn-xs\" lay-event=\"upd\">编辑</a>\n";
                                    if (res.root != 1) {
                                        html += "<a class=\"layui-btn layui-btn-warm layui-btn-xs\" lay-event=\"updPid\">变更父级</a>\n";
                                    }
                                    html += "<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\">删除</a>\n";
                                    return html;
                                }
                            }
                        ]
                    ]
                });
            }


            /**
             *  工具栏事件（多删除 || 添加）  ==>> toolbar(auth-table): toolbar=监听表格头事件,  auth-table=数据表格elem 名称
             * @author ws
             * @mail  1720696548@qq.com
             * @param null
             * @date  2020/4/10 0010 0:05
             * @return
             */
            function xijiaEventToolbar() {
                let $ = layui.$, active = {
                    add: function () {
                        data = [];    // 初始化data
                        data.lv = 1;  // 给初始化后的data添加值
                        Pop.tipsWindown(page_add, "800px", "600px", "添加系统");
                    }
                };
                //必须在下面/监听class = demoTable内按钮
                $('.layui-container .layui-btn').on('click', function () {
                    let type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            }


            /**
             *   监听数据表格内按钮（编辑 || 删除 || 其他）, tool(auth-table)==> tool =监听按钮， auth-table=数据表格elem对应值
             * @author ws
             * @mail  1720696548@qq.com
             * @date  2020/4/10 0010 0:03
             * @return
             */
            function xijiaEventTool() {
                //  表格内的按钮监听
                layui.table.on('tool(auth-table)', function (obj) {
                    //当前行数据
                    data = obj.data;
                    //   菜单添加
                    if (obj.event === 'add') {
                        data.lv = 2; //表示添加菜单
                        Pop.tipsWindown(page_add, "800px", "600px", "添加菜单--" + data.name)
                    }
                    //   页面添加
                    if (obj.event === 'addPage') {
                        data.lv = 3;  //表示添加页面
                        Pop.tipsWindown(page_add, "800px", "600px", "添加页面--" + data.name)
                    }
                    //   删除行(加子菜单)
                    if (obj.event === 'del') {
                        // Pop.tipsDeleteId(deletes + delData, obj);
                        layer.msg('你确定要删除么？', {
                            time: 0
                            , btn: ['必须删', '不删了']
                            , yes: function (index) {
                                // 获得要删除菜单及所有子菜单
                                let result = Ajax.delete(menuUrl + "/" + data.id);
                                // 重载页面 // parent.window.location.reload();
                                WindowPos.onbeforeunload();  // 记录滚动条位置
                                xijiaRenderTable();             // 重载数据
                                WindowPos.onload();          // 还原滚动条位置
                                layer.msg(result.msg);
                            }
                        });
                    }
                    //  修改菜单名称
                    if (obj.event === 'upd') {
                        Pop.tipsWindown(page_upd, "800px", "600px", "编辑")
                    }
                    //  变更父级
                    if (obj.event === 'updPid') {
                        Pop.tipsWindown(page_updPid, "800px", "600px", "变更父级-" + data.name);
                        // WindowPos.onbeforeunload();  // 记录滚动条位置
                        // xijiaRenderTable();             // 重载数据
                        // WindowPos.onload();          // 还原滚动条位置
                    }
                });

                //  表格内直接编辑内容的监听
                layui.table.on('edit(auth-table)', function (obj) {
                    let data = obj.data;   // 得到所在行整行数据
                    let val = obj.value;   // 得到修改后的值
                    let field = obj.field; // 得到修改的字段
                    let result;
                    if (field === "sort") {
                        //   1，sort-修改排序
                        result = Ajax.put(menuUrl + "/" + data.id, {sort: val});
                    } else if (field === "icon") {
                        //   2，icon-修改图标
                        result = Ajax.put(menuUrl + "/" + data.id, {icon: val})
                    } else if (field === "url") {
                        //   3、url-修改菜单url
                        result = Ajax.put(menuUrl + "/" + data.id, {url: val})
                    } else {
                        //   4、name-修改菜单名
                    }
                    layer.msg(result.msg);
                });
            }

            /**
             *   条件搜索
             * @author ws
             * @mail  1720696548@qq.com
             * @date  2020/4/10 0010 0:03
             * @return
             */
            function xijiaEventSearch() {
                layui.$('#btn-expand').click(function () {
                    layui.treetable.expandAll('#auth-table');
                });

                layui.$('#btn-fold').click(function () {
                    layui.treetable.foldAll('#auth-table');
                });

                layui.$('#btn-search').click(function () {
                    let keyword = $('#edt-search').val();
                    let searchCount = 0;
                    layui.$('#auth-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                        layui.$(this).css('background-color', 'transparent');
                        let text = $(this).text();
                        if (keyword !== '' && text.indexOf(keyword) >= 0) {
                            layui.$(this).css('background-color', 'rgba(250,230,160,0.5)');
                            if (searchCount === 0) {
                                layui.treetable.expandAll('#auth-table');
                                layui.$1('html,body').stop(true);
                                layui.$1('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                            }
                            searchCount++;
                        }
                    });
                    if (keyword === '') {
                        layer.msg("请输入搜索内容", {icon: 5});
                    } else if (searchCount === 0) {
                        layer.msg("没有匹配结果", {icon: 5});
                    }
                });
            }


            /**
             *  监听单选选中
             * <p>
             * switch(state) 对应 lay-filter='state'
             */
            function xijiaEventSwitch() {
                layui.form.on('switch(disable)', function (data) {
                    let disable = data.elem.checked ? 0 : 1;
                    let id = data.elem.attributes['menuId'].nodeValue;
                    let result = Ajax.put(menuUrl + "/" + id, {disable: disable});
                    layer.msg(result.msg)
                });
            }
        </script>
    </body>
</html>